<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="flex-row bg-white mb-20 header-h">
            <view class="flex-grow-0">
                <image mode="aspectFill" :src="data.data.goods_pic" style="width:120upx;height:120upx;margin-right: 24upx"></image>
            </view>
            <view class="flex-grow-1">
                <view>物流状态：
                    <text style="color:#25ae5f">{{data.data.status_text}}</text>
                </view>
                <view style="color: #888">快递公司：{{data.data.express}}</view>
                <view class="flex-row flex-y-center" style="color: #888">
                    <view class="flex-grow-1">快递单号：{{data.data.express_no}}</view>
                    <view @tap="copyText" class="flex-grow-0 flex-x-center" :data-text="data.data.express_no" style="width:100upx;height:50upx;border:1upx solid #eee;">复制</view>
                </view>
            </view>
        </view>
        <view class="data-list" v-if="data.data.list&&data.data.list.length>0">
            <view class="data-item flex-row" v-for="(item,index) in data.data.list" :key="index">
                <view class="flex-grow-0 item-icon flex-col">
                    <view class="item-line flex-grow-0"></view>
                    <view class="item-line flex-grow-0 fs-0">
                        <image class="point-gray" :src="data.__wxapp_img.point.gray.url" style="width:16upx;height: 16upx "></image>
                        <image class="point-green" :src="data.__wxapp_img.point.green.url" style="width:32upx;height: 32upx;left: -15upx "></image>
                    </view>
                    <view class="item-line flex-grow-1"></view>
                </view>
                <view class="flex-grow-1 item-content">
                    <view>{{item.detail}}</view>
                    <view>{{item.datetime}}</view>
                </view>
            </view>
        </view>
        <view class="no-data" v-else>
            暂无物流信息
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {},
			};
		},
		onLoad: function(t) {myVue = this;
        if (myVue.getApp.page.onLoad(this, t), t.inId) e = {
            order_id: t.inId,
            type: "IN"
        }; else var e = {
            order_id: t.id,
            type: "mall"
        };
        this.loadData(e);
    },
		onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    },
		methods: {
			loadData: function(t) {
        var e = this;
        myVue.getApp.core.showLoading({
            title: "正在加载"
        }), myVue.getApp.request({
            url: myVue.getApp.api.order.express_detail,
            data: t,
            success: function(t) {
                e.getApp.core.hideLoading(), 0 == t.code && e.setData({
                    data: t.data
                }), 1 == t.code && e.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && e.getApp.core.navigateBack();
                    }
                });
            }
        });
    },
		copyText: function(t) {
        var e = t.currentTarget.dataset.text;
        myVue.getApp.core.setClipboardData({
            data: e,
            success: function() {
                myVue.getApp.core.showToast({
                    title: "已复制"
                });
            }
        });
    }
		},
	}
</script>

<style scoped>
.header-h {
    border-top: 1upx solid #e3e3e3;
    padding: 32upx 24upx;
}

.data-list {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
}

.data-list .data-item {
    padding-right: 24upx;
}

.data-list .data-item .item-icon {
    padding: 0 40upx;
}

.data-list .data-item .item-line {
    width: 2upx;
    background: #e3e3e3;
    position: relative;
}

.data-list .data-item .item-line:nth-of-type(1) {
    height: 42upx;
}

.data-list .data-item .item-line image {
    position: absolute;
    left: -5upx;
    z-index: 9;
    top: -6upx;
}

.data-list .data-item .item-line image.point-green {
    display: none;
}

.data-list .data-item:first-child .item-line image.point-green {
    display: block;
}

.data-list .data-item:first-child .item-line:nth-of-type(1) {
    opacity: 0;
}

.data-list .data-item:last-child .item-line:nth-of-type(3) {
    opacity: 0;
}

.data-list .data-item .item-content {
    padding: 28upx 0;
    border-bottom: 1upx solid #eee;
    color: #888;
}

.data-list .data-item:first-child .item-content {
    color: #25ae5f;
}

.data-list .data-item:last-child .item-content {
    border-bottom: none;
}

.no-data {
    padding: 24upx;
    text-align: center;
    color: #888;
}
</style>
